<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>轮播图添加或修改</title>
</head>
<body>

<div class="layui-container">
    <div class="layui-row">
        <button class="layui-btn layui-col-md1" id="back"><i class="layui-icon">&#xe65c;</i>返回</button>
        <h1 class="layui-col-md-offset5">轮播管理</h1>
    </div>
    <hr/>
    <br/>
    <br/>
    <div class="layui-row">
        <form class="layui-form " id="userForm"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
            <input hidden="hidden" th:value="${carousel==null? null:carousel.id}" name="id" />
                <div class="layui-form-item">
                    <label class="layui-form-label">上传轮播图</label>
                    <div class="layui-input-inline">

                        <img height="150" width="350" alt="用户图片"
                             th:src="${carousel==null? 'wxui/images/rqsc/3.jpg':carousel.img}" id="headimg"/>
                        <br/>
                        <button type="button" class="layui-btn" id="uploadimg">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                    </div>
                    <input type="hidden" name="img" th:value="${carousel==null? null:carousel.img}" id="imgsrc"/>
                    <div class="layui-form-mid layui-word-aux" id="nameMsg"></div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <textarea name="mark" th:text="${carousel==null? null:carousel.mark}" placeholder="请输入内容"
                                  class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">商品编号</label>
                    <div class="layui-input-inline">
                        <input type="text" layui- th:value="${carousel==null? null:carousel.goodId}" id="goodsid" name="goodId"
                               lay-verify="required" autocomplete=" off"
                               class="layui-input layui-disabled">
                    </div>
                    <button type="button" class="layui-btn" id="listBtn">
                        <i class="layui-icon">&#xe67c;</i>选择商品
                    </button>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">商品名称</label>
                    <div class="layui-input-inline">
                        <input type="text" id="goodsname" layui- th:value="${carousel==null? null:carousel.goodsName}"
                               lay-verify="required" autocomplete=" off"
                               class="layui-input layui-disabled">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="carousel">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    // 配置
    layui.config({
        base: 'wxui/lib/hpModules/' // 扩展模块目录
    }).extend({ // 模块别名
        hpWindow: 'hpWindow/hpWindow'
    });
    layui.use(['upload', 'form','hpWindow'], function () {
        var upload = layui.upload;
        var form = layui.form;
        var $=layui.$;
        var hpWindow = layui.hpWindow;

        /*****************************
         * @Description: 文件上传
         * @Param:
         * @return:
         * @Author: 刘涛
         * @Date: 2018/3/17
         *******************************/
         upload.render({
            elem: '#uploadimg' //绑定元素
            ,
            url: 'upload/simpleupload' //上传接口
            ,
            done: function (res) {
                //上传完毕回调
                $("#headimg").attr("src", res.data);
                $("#imgsrc").val(res.data);
            },
            error: function () {
                //请求异常回调
            }
        });
        /*****************************
        * @Description:轮播图关联商品的回选
        * @Param:  
        * @return:  
        * @Author: 刘涛 
        * @Date: 2018/3/17 
        *******************************/
        hpWindow.openList("#listBtn",'carousel/selcetGoods',{},function(data,index,layro){
            //layer.alert(JSON.stringify(data))
            var json=data[0];
            $('#goodsid').val(json.id);
            $('#goodsname').val(json.name);
            //alert(json);
        })

        form.on('submit(carousel)', function (data) {
            $.ajax({
                url: "/carousel/addOrUpdate",
                dataType: "json",
                data: data.field,
                type: "post",
                success: function (data) {
                    if (data.code == 200) {
                        layer.msg(data.msg+'页面稍后跳转', {icon: 1, anim: 1});
                        setTimeout('$("#content-body").load("/carousel/goCarouselPage")',3000);
                    } else {
                        layer.msg(data.msg, {icon: 2, anim: 6});
                    }
                }
            })
            return false;
        })

        $("#back").click(function () {
            $("#content-body").load("/carousel/goCarouselPage");
        })

    });
</script>
</body>
</html>